<template>
	<div>
		<div class="header">
			<router-link class="return" to='/' tag=span>返回</router-link>
			<h2>新闻详情</h2>
			<span class="share">分享</span>
		</div>
		<div class="news">
			<h1 class="title">
				{{data.title}}
			</h1>
			<div class="author">
				<img :src="data.media_user.avatar_url" alt="" v-if=data.media_user class="img">
				<div class="name-and-timeStr">
					<span class="author-name">
						{{data.source}}
					</span>
					<span class="timeStr">
						{{timeStr}}
					</span>
				</div>
			</div>
			<div v-html='data.content' class="content">
				
			</div>
		</div>
	</div>
</template>
<script>
	import {getNewsDetail} from '@/api/ajax.js'
	import {timestampToTime} from '@/api/utility.js'
	export default{
		data(){
			return {
				data:{

				},
				timeStr:''
			}
		},
		created(){
			console.log(this.$route.params.id)
			let routerId = this.$route.params.id
			let id = routerId.substr(1,routerId.length-2)
			console.log(id)
			let that = this
			getNewsDetail(id,function(res){
				console.log(res)
				console.log(res.data.content)
				that.data=res.data
				console.log(res.data.publish_time)
				that.timeStr = timestampToTime(res.data.publish_time)
			})
		}

	}
</script>
<style scoped lang="stylus">
	.news{
		padding: 0 .3rem;
		padding-top: 1rem;
		padding-bottom: 1rem
	}
	.header{
		position: fixed;
		top: 0;
		width: 100%;
	    height: 0.88rem;
	    color: #fff;
	    font-size: 0.4rem;
	    line-height: 0.88rem;
	    background-color: #d43d3d;
	}
	.header .return, .share, {
		position: absolute;
	}
	.header .return {
		top: 0;
		left: .3rem;
	}
	.header .share{
		top: 0;
		right:.3rem;
	}
	.header h2{
		text-align: center;
	}
	 .news .content /deep/ p{
		margin-top: .5rem;
		font-size: .34rem;
		line-height: .6rem;
	    word-wrap: break-word;
	    color: #222;
	    text-align: justify;
	}
	.news .content >>> img{
	    width: 100%;
	    display: block;
	    margin-right: auto;
	    margin-left: auto;
	    margin-top: 4px;
	    margin-bottom: 4px;
	    transition: opacity 200ms ease;
	}
	.news .title{
	    font-size: .44rem;
	    line-height: .7rem;
	    font-weight: 500;
	}
	.news .author{
		display: flex;
		align-items: center;
	}
	.news .author  .img{
		height: .7rem;
		width: .7rem;
		border-radius: 50%
		text-align:justify
	}
	.news .author .name-and-timeStr{
		display: inline-block;
		margin-left: .3rem;
		text-align:justify
	}
	.news .author .name-and-timeStr span{
		display: flex;
		flex-direction: column;
	}
	.news .author .name-and-timeStr .author-name{
		    font-weight: 600;
	}
	.news .author .name-and-timeStr .timeStr{
		font-size: .24rem;
		line-height: .4rem;
		color: #666;
	}
</style>